<template>
  <el-row justify="space-between">
    <el-col :span="3">
      <el-menu
        default-active="2"
        unique-opened
        v-for="(item,key) in dataSource"
        @open="open"
        @close="open"
      >
        <SideMenu :data="item" :index ="String(key)" @go="go" />
      </el-menu>
    </el-col>
    <el-col :span="20">
      <table-where :forms="forms" @onSubmit="onSubmit"></table-where>
      <wms-table ref="tableQuery" :tableDatas="tableDatas" @editHandle="editHandle"></wms-table>
    </el-col>
  </el-row>
  <el-drawer v-model="edit" title="修改商品" show-close :close-on-click-modal="false" :size="isClass == true ? '50%':'30%'">
    <table-where :forms="editFormsGoods" v-if="isClass"></table-where>
    <table-where :forms="editFormsClass" v-if="!isClass"></table-where>
  </el-drawer>
</template>

<script setup name="商品资料">
import { ref, reactive,computed } from 'vue'
import { POSTJSON,POST } from '@/components/utils/http'
import { objAssign,message,MessageBox } from '@/components/utils/api'
import { useWmsGlobal } from '@/store/wmsGlobal'
import SideMenu from '@/components/layouts/SideMenu.vue'
import pinyin from 'js-pinyin'
const wmsGlobal = useWmsGlobal()
const isClass = ref(true);
let dataSource = reactive([])
let goodsData = reactive([])
let currClass = reactive({});
const edit = ref(false)
const findChild = (number)=>{
  const result = []
  goodsData.forEach( item =>{
    item.value = item.goods_number;
    if(item.parent_number === number){
      result.push(item);
    }
  })
  formatData(result)
  return result;
}

const formatData = (data)=>{
  if(Array.isArray(data)){
    data.forEach((item)=>{
      item.menu_name = item.name
      item.url = item.goods_number
      if(item.parent_number == null){
        item.childItem = findChild(item.goods_number)
        dataSource.push(item)
      }else if(item.parent_number !== null && item.menu_level !==0){
        item.childItem = findChild(item.goods_number)
      }
    })
  }
}
const getGoodsClass = ()=>{
  POSTJSON('/Goods/getGoodsPage',{is_goods:0}).then(data=>{
    dataSource.splice(0,dataSource.length)
    goodsData.splice(0,goodsData.length)
    data.data.forEach((a)=>{
      goodsData.push(a)
    })
    formatData(data.data)
  })
}

const tableDatas = reactive({
  body: {
    //表数据
    head: 'goods',
    url: '/Goods/getGoodsPage',
    params: {},
    type: 'POSTJSON'
  },
  delete: {
    url: '/Goods/deleteGoods',
    params: { id: 'id' }
  },
  edit: {}
})
const getGoods = ()=>{
  // POSTJSON('/Goods/getGoodsPage',{is_goods:1,parent_number:currClass.goods_number}).then(data=>{
  //   tableDatas.tableData = data.data
  // })
  objAssign(tableDatas.body.params,{is_goods:1,parent_number:currClass.goods_number})
  onSubmit();
}
const tableQuery = ref()

const onSubmit = () => {
  tableQuery.value.getData()
}
const forms = reactive({
  data: tableDatas.body.params,
  rules: [],
  compValue: [
    { label: '名称', value: 'params', type: 'iconinput' },
    {
      label: '新增类别',
      type: 'button',
      onclick: () => {
        edit.value = true
        isClass.value = false
        editFormsClass.data = { goods_stat: 1 ,is_goods:0}
      }
    },
    {
      label: '修改类别',
      type: 'button',
      onclick: () => {
        edit.value = true
        isClass.value = false
        editFormsClass.data = Object.assign({},currClass)
      }
    },
    {
      label: '删除类别',
      type: 'button',
      onclick: () => {
        if(!currClass.id){
          message('请选择类别') 
          return
        }
        MessageBox("确定删除"+currClass.name +"吗",()=>{
          POST(tableDatas.delete.url,{id:currClass.id}).then(data=>{
            if(data.code === 200){
              getGoodsClass()
            }
          })
        })
        
      }
    },
    {
      label: '新增商品',
      type: 'button',
      onclick: () => {
        if(currClass.menu_level!==0){
          message('请选择类别') 
          return
        }
        edit.value = true
        isClass.value = true
        editFormsGoods.data.goods_stat = 1;
        editFormsGoods.data.is_goods=1;
        editFormsGoods.data.parent_number = currClass.goods_number;
        editFormsGoods.data.ClassName = currClass.name;
      }
    },
    { label: '查询全部', type: 'button', onclick: ()=>{
      tableDatas.body.params.is_goods=1
      tableDatas.body.params.parent_number=null;
      onSubmit()
    } }
  ]
})
const editFormsClass = reactive({
  data: {},
  rules: [],
  compValue: [
    { label: '类别名称', value: 'name', type: 'input', placeholder: '商品名称', show: true, rule: { required: false } },
    { label: '上级编号', value: 'parent_number', type: 'select',options:goodsData, placeholder: '上级编号', show: true, rule: { required: true } },
    { label: '是否末级', value: 'menu_level', type: 'switch', options: { true: 0, false: 1 } ,show: true},
    {
      label: '保存',
      type: 'button',
      onclick: () => {
        editFormsClass.data.is_goods = 0
        POSTJSON('/Goods/addOrUpdateGoods', editFormsClass.data).then(data => {
          if (data.code === 200) {
            editFormsClass.data = {}
            getGoodsClass();
          }
        })
      }
    },
    {
      label: '返回',
      type: 'button',
      onclick:()=> {
        edit.value = false
      }
    }
  ]
})
const createPinyin = (value)=>{
  if(!value)return;
  pinyin.setOptions({checkPolyphone: false, charCase: 1}) 
  editFormsGoods.data.pinyin = pinyin.getCamelChars(value)
}
const editFormsGoods = reactive({
  data: {},
  rules: [],
  inline: true,
  compValue: [
    // { label: '类别名称', value: 'ClassName', type: 'input',disabled:true},
    { label: '商品编号', value: 'goods_number', type: 'input', placeholder: '商品编号', show: true, rule: { required: false } },
    { label: '商品名称', value: 'name', type: 'input', placeholder: '商品名称', show: true, rule: { required: false } ,change:createPinyin},
    { label: '拼音', value: 'pinyin', type: 'input', placeholder: '规格编号', show: true, rule: { required: false } },
    { label: '规格编号', value: 'standard_number', type: 'input', placeholder: '规格编号', show: true, rule: { required: false } },
    { label: '规格名称', value: 'standard_name', type: 'input', placeholder: '规格名称', show: true, rule: { required: false } },
    { label: '描述', value: 'note', type: 'input', placeholder: '描述', show: true, rule: { required: false } },
    { label: '条码', value: 'barcode', type: 'input', placeholder: '条码', show: true, rule: { required: false } },
    { label: '供应商', value: 'c_id', type: 'numberInput', placeholder: '供应商', show: true, rule: { required: false } },
    { label: '品牌', value: 'brand', type: 'input', placeholder: '品牌', show: true, rule: { required: false } },
    { label: '长度单位', value: 'len_unit', type: 'input', placeholder: '长度单位', show: true, rule: { required: false } },
    { label: '体积单位', value: 'volume_unit', type: 'input', placeholder: '体积单位', show: true, rule: { required: false } },
    { label: '重量单位', value: 'weight_unit', type: 'input', placeholder: '重量单位', show: true, rule: { required: false } },
    { label: '单位', value: 'unit', type: 'input', placeholder: '单位', show: true, rule: { required: false } },
    { label: '重量', value: 'weight', type: 'numberInput', placeholder: '重量', show: true, rule: { required: false } },
    { label: '长度', value: 'len', type: 'numberInput', placeholder: '长度', show: true, rule: { required: false } },
    { label: '宽度', value: 'width', type: 'numberInput', placeholder: '宽度', show: true, rule: { required: false } },
    { label: '高度', value: 'height', type: 'numberInput', placeholder: '高度', show: true, rule: { required: false } },
    { label: '体积', value: 'volume', type: 'numberInput', placeholder: '体积', show: true, rule: { required: false } },
    { label: '成本价', value: 'cost_price', type: 'numberInput', placeholder: '成本价', show: true, rule: { required: false } },
    { label: '售价', value: 'price', type: 'numberInput', placeholder: '售价', show: true, rule: { required: false } },
    { label: '状态', value: 'goods_stat', type: 'select',options: wmsGlobal.wmsOptions['goods_stat'] },
    {
      label: '保存',
      type: 'button',
      onclick: () => {
        POSTJSON('/Goods/addOrUpdateGoods', editFormsGoods.data).then(data => {
          if (data.code === 200) {
            editFormsGoods.data = {}
          }
        })
      }
    },
    {
      label: '返回',
      type: 'button',
      onclick: () => {
        edit.value = false
      }
    }
  ]
})
const go = (data,to)=>{
  objAssign(currClass,data)
  getGoods();
}
const open = (index)=>{
  let item = {
    childItem : dataSource
  }
  const arr = index.split('-')
  arr.forEach(key =>{
    item = item.childItem[Number(key)]
  })
  objAssign(currClass,item)
}
const editHandle = ({ row }) => {
  edit.value = true
  isClass.value = true
  editFormsGoods.data = Object.assign({}, row)
}
getGoodsClass()
</script>
